import React, { useState } from 'react'
import './login.scss'
import axios from '../../axios'
import Card from '../Card/Card'
import Tbas from '../Tabs/Tabs'
import Form from '../Form/Form'
import FormItem from '../Form/FormItem'
import { setUser } from '../../utils/storage' 
import Button from '../Button/Button'

export default function Login(props) {
  const tabs = ['登录', '注册']
  const [current, setCurrent] = useState(0)

  const form = {
    username: '',
    password: '',
    email: '',
    nickname: ''
  }

  const login = () => {
    axios.post('/login', form).then((res) => {
      setUser(res.data)
      window.location.href = ''
      props.close()
    })
  }

  const register = () => {
    axios.post('/register', form).then((res) => {
      setUser(res.data)
      window.location.href = ''
      props.close()
    })
  }

  
  const inputChange = (e, key) => {
    // console.log(e, key)
    form[key] = e.target.value
    console.log(form)
  }

  return (
    <div className='login'>
      <Card className='card' close={props.close} onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
      }}>
        <Tbas tabs={tabs} current={current} setCurrent={setCurrent}></Tbas>
        {
          current === 0 ? <div className='login-form'>
            <Form className='form'>
              <FormItem label='用户名' name='username'>
                <input className='input' type="text" name="username" placeholder='请输入用户名'
                  onChange={(e) => inputChange(e, 'username')} />
              </FormItem>
              <FormItem label='密码' name='password'>
                <input className='input' type="password" name="password" placeholder='请输入密码'
                  onChange={(e) => inputChange(e, 'password')} />
              </FormItem>
            </Form>
            <div className='submit' onClick={login}>
              <Button>登录</Button>
            </div>
          </div>
            :
            <div className='register-form'>
              <Form className='form'>
                <FormItem label='邮箱' name='email'>
                  <input className='input' type="text" name="email" placeholder='请输入邮箱'
                     onChange={(e) => inputChange(e, 'email')} />
                </FormItem>
                <FormItem label='用户名' name='username'>
                  <input className='input' type="text" name="username"  placeholder='请输入用户名'
                    onChange={(e) => inputChange(e, 'username')} />
                </FormItem>
                <FormItem label='昵称' name='nickname'>
                  <input className='input' type="text" name="nickname"  placeholder='请输入昵称'
                    onChange={(e) => inputChange(e, 'nickname')} />
                </FormItem>
                <FormItem label='密码' name='password'>
                  <input className='input' type="password" name="password" placeholder='请输入密码'
                    onChange={(e) => inputChange(e, 'password')} />
                </FormItem>
              </Form>
              <div className='submit' onClick={register}>
                <Button>注册</Button>
              </div>
            </div>
        }

      </Card>
    </div>
  )
}
